<script setup lang="ts">
import { onUnmounted,  onMounted, ref } from 'vue';
import {  useNotification } from "naive-ui";
import { Selector, Markdown} from '@/components/common';
import { Payment} from "@/views/dashboard/call/components";
import { userAPIKEYAPI } from "@/api";
import {userApiKeyFilterModel} from "@/api/entity/RequestParam";
import {getPageData, userApiKey, selectDataList} from "@/api/entity/ResultParam";
import {resultCodeNotify} from "@/utils/rest/notifyHint";
import { copyEvent} from "@/utils/rest/browserVersion";


const select_value = ref<number>(1)

const requestUserAPIParam = ref<userApiKeyFilterModel>({count: 3, page: 0})
const hint = useNotification();              // 提示


const api_data_List = ref<selectDataList[]>([]);
const select_api_value = ref<string>('');

/**
 * 初始化
 */
onMounted( ()=> {
  getUserKeyList()
})

/**
 * 初始化加载用户得api 列表
 */
function initloadUserApiList() {

}

/**
 *  切换api 类型
 * @param method
 */
function selectMethod(method: number) {
  select_value.value = method
}

/**
 * 复制api key 值
 */
function copyApiValue() {
  if (select_api_value.value !== null && select_api_value.value !== '') {
    copyEvent(select_api_value.value, hint)
  }
}

/**
 * 获取用户密钥
 */
function getUserKeyList() {
  userAPIKEYAPI(requestUserAPIParam.value).then(res => {
    if (res.code === 200) {
      const resultData:getPageData = res.data
      const apiList:userApiKey[] = resultData.pageList
      select_api_value.value = apiList[0].apiKey
      for (const apiKey of apiList) {
        const data:selectDataList = {
          text: apiKey.apiKey,
          value: apiKey.apiKey
        }
        api_data_List.value.push(data)
      }
    }
  }).catch(error => {
    resultCodeNotify(hint, "api 加载失败", error);
  })
}

function handleSelectChange (newValue: string){
  select_api_value.value = newValue
}



</script>

<template>
  <div class="call-page mb-20">
    <div class="call-title w-40 pt-10 mx-auto fs-4 "> API 测试</div>
    <div class="row w-100">
      <div class="col-lg-6  ml-1 pt-10 d-flex">
        <div :class="{'get-select': select_value==1}" class="select-method" @click="selectMethod(1)">
          支付测试
        </div>
        <div :class="{'get-select': select_value==2}" class="select-method" @click="selectMethod(2)">
          退款测试
        </div>
        <div :class="{'get-select': select_value==3}" class="select-method" @click="selectMethod(3)">
          提现测试
        </div>
      </div>

      <div class="col-lg-5 pt-10 d-flex">
        <p class="text-center-api">API KEY: </p>
        <Selector class="w-60 ml-5"
                  :label="''"
                  @change="handleSelectChange"
                  :options="api_data_List"
                  :value="select_api_value"/>
        <p class="text-center-copy" @click="copyApiValue">复制</p>
      </div>
    </div>

    <div class="mt-10">
      <Payment :apiKey="select_api_value"></Payment>
    </div>
  </div>
</template>

<style scoped>
.text-center-api {
  margin-left: 20px;
  line-height: 40px;
}
.text-center-copy {
  margin-left: 20px;
  line-height: 40px;
}
.text-center-copy:hover {
  cursor: pointer;
  color: red;
  transform: scale(1.2);
}
.call-title {
  color: #2F80ED;
  font-weight: bold;
}
.select-method {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 16px;
}
.select-method:hover {
  cursor: pointer;
  transform: scale(0.9);
  font-style: italic;
}
.get-select {
  color: red;
  border-left: 4px solid #2F80ED;
  border-bottom: 1px solid #2F80ED;
}
</style>
